<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 显示总价格 -->
		<div id="app">
			<h2>总价格: {{totalPrice}}</h2>
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app = new Vue({
			el : '#app',
			data:{
				books : [
					{id:110,name:'Unix编程艺术',price:110},
					{id:111,name:'代码大全',price:107},
					{id:112,name:'深入理解计算机原理',price:105},
					{id:113,name:'线代',price:101}
				]
			},
			computed:{
				// filter/map/reduce高阶函数
				totalPrice:function(){
					let result = 0;
					for(let i=0;i<this.books.length;i++){
						result += this.books[i].price;
					}
					// es6语法 in 
					// for(let i in this.books){
					// 	result += this.books[i].price;
					// }
					// es6语法 of
					// for(let book of this.books){
					// 	result += book.price;
					// }
										
					return result;
				}
			}
		})
	</script>
</html>
